<template>
	<swiper class="gy-banner" :class="{margin: props.card, radius: props.showRadius && props.card}" circular
		:autoplay="props.autoplay" :interval="3000" :duration="300">
		<swiper-item class="gy-banner-item" v-for="(item, index) in props.list" :key="index"
			@click.stop="proxy.utils.system.customGo(item, 2)">
			<image :src="proxy.utils.image.fullPath(item.img)"></image>
			<!-- <image v-if="item.type === 'image'" :src="config.imgURL + item.path"></image> --> //暂时只有图片封面
			<!-- <video
				v-if="item.type === 'video'"
				:src="item.path"
				:autoplay="item.autoplay && item.autoplay === true ? true : false"
				:poster="item.cover"></video> -->
			<!-- <view v-if="item.title" class="title text-ellipsis">{{ item.title }}</view> -->
		</swiper-item>
	</swiper>
</template>

<script lang="ts" setup>
	
	import {
		getCurrentInstance
	} from "vue";
	
	const { proxy } : any = getCurrentInstance();
	
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		card: {
			type: Boolean,
			default: false
		},
		showRadius: {
			type: Boolean,
			default: true
		},
		autoplay: {
			type: Boolean,
			default: true
		}
	});
	
</script>

<style scoped lang="scss">
	.gy-banner {
		position: relative;
		height: calc((100vw - 60rpx) / 3.5 * 1);
		overflow: hidden;

		.gy-banner-item {

			image,
			video {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: var(--gy-border-radius-large);
			}

			.gy-banner-video-cover {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.title {
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				background-color: rgba(0, 0, 0, 0.7);
				color: #ffffff;
				font-size: 28rpx;
				padding: 0 var(--gy-gap);
			}
		}
	}
</style>
